<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-22 17:03:38
-->
<template>
<!-- 2. -->
  <div ref="root" style="height:150px">
   
  </div>
</template>

<script>
// 1.
import {Liquid} from '@antv/g2plot'
export default {

  data(){
    return {
      percent:0
    }
  },
  methods:{
    // 3.
    initCharts(){
    const liquidPlot = new Liquid(this.$refs['root'], {
    percent:this.percent,
    outline: {
      border: 2,
      distance: 3,
    },
    wave: {
      length: 128,
    },
  });
  liquidPlot.render();

  setInterval(()=>{
    if(this.percent<0.75){
      this.percent+=0.01
      liquidPlot.changeData(this.percent)
    }else{
      this.percent = 0.75
    }
  },10)

  }
  },
  mounted(){
    this.initCharts()
  }
 
  
}
</script>

<style lang="scss">


</style>